<template>
  <view class="u-th" :style="[thStyle, customStyle]">
    <slot></slot>
  </view>
</template>

<script>
import mpConfig from '../../libs/mixin/mp-vertual-node.js'
  /**
   * th th单元格
   * @description 表格组件一般用于展示大量结构化数据的场景（搭配u-table使用）
   * @tutorial https://www.uviewui.com/components/table.html#td-props
   * @property {String Number} width 标题单元格宽度百分比或者具体带单位的值，如30%，200rpx等，一般使用百分比，单元格宽度默认为均分tr的长度
   * @example 暂无示例
   */
  export default {
    name: "u-th",
    options: mpConfig,
    props: {
      // 宽度，百分比或者具体带单位的值，如30%， 200rpx等，一般使用百分比
      width: {
        type: [Number, String],
        default: ''
      }
    },
    data() {
      return {
        thStyle: {}
      }
    },
    mounted() {
      this.updateParentData()
      // this.parent在updateParentData()中定义
      this.parent.children.push(this);
    },
    methods: {
      getThStyle() {
        let style = {}
        if (this.parent) {
          // 将父组件的相关参数，合并到本组件
          if (this.width !== 'auto') style.flex = `0 0 ${this.width}`;
          style.textAlign = this.parent.align;
          style.padding = this.parent.padding;
          style.borderBottom = `solid 1px ${this.parent.borderColor}`;
          style.borderRight = `solid 1px ${this.parent.borderColor}`;
          style.fontSize = this.parent.fontSize / 2 + 'px';
          style.color = this.parent.color;
          style.backgroundColor = this.parent.bgColor;
          Object.assign(style, this.parent.style);
        }
        return style
      },
      updateParentData() {
        // 避免在created中去定义parent变量
        if(!this.parent) this.parent = false;
        this.parent = this.$u.$parent.call(this, 'u-table');
        const _thStyle = this.getThStyle()
        if(JSON.stringify(_thStyle) !== JSON.stringify(this.thStyle)){
          this.thStyle = _thStyle;
        }
      }
    }
  };
</script>

<style lang="scss" scoped>
  @import "../../libs/css/style.components.scss";

  .u-th {
    @include vue-flex(column);
    flex: 1;
    justify-content: center;
    font-size: 28rpx;
    color: $u-main-color;
    font-weight: bold;
    background-color: rgb(245, 246, 248);
    min-width: 0;
    word-break: break-all;
  }
</style>
